<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>车车车</title>
		<link rel="stylesheet" href="./css/index.css">
	</head>

	<body>
		<div class="outer">
			<div class="todo-container">
				<!-- 头部 -->
				<div class="todo-header">
					<input type="text" id="newTodo" placeholder="请输入您的任务，回车确认">
				</div>
				<!-- 内容展示区域 -->
				<ul class="todo-main">
					<!-- <li class="todo-list">
                    <label>
                        <input type="checkbox">
                        <span>抽烟</span>
                    </label>
                    <button class="btn btn-danger">删除</button>
                </li>
                <li class="todo-list">
                    <label>
                        <input type="checkbox">
                        <span>喝酒</span>
                    </label>
                    <button class="btn btn-danger">删除</button>
                </li>
                <li class="todo-list">
                    <label>
                        <input type="checkbox">
                        <span>烫头发</span>
                    </label>
                    <button class="btn btn-danger">删除</button>
                </li> -->
				</ul>
				<!-- 底部区域 -->
				<div class="todo-footer">
					<label>
						<input type="checkbox" id="checkAll">
					</label>
					<span>
						已完成 <span id="allComplateTodos">0</span>
						/全部 <span id="allTodos">0</span>
					</span>
					<button id="removeAllComplate" class="btn btn-danger">清除已完成任务</button>
				</div>
			</div>
		</div>
		<script src="./js/jquery.js"></script>
		<script>
			var obj = {
				doThing: [{
						content: "吃"
					},
					{
						content: "喝"
					},
					{
						content: "嫖",
					},
					{
						content: "嫖"
					}
				]
			}

			$(function() {

				// 加载后台数据 渲染
				loadData();

				function loadData() {
					// jquery的第一种each用法  each方法的第一个参数是列表，第二个参数是function
					// function中的第一个参数是index 第二个参数是item
					$.each(obj.doThing, function(index, item) {
						var str =
							'<li class="todo-list">\
										<label>\
											<input type="checkbox">\
											<span>'+item.content+'</span>\
										</label>\
										<button class="btn btn-danger">删除</button>\
							</li>'
							// 正常来说 append后面应该追加的是一个jq对象 但是jq后台对string
							// 进行了优化  可以直接追加str
							$('.todo-main').append(str);

					})
					
				}
				
				
				// 鼠标移入移出修改样式
				hoverData();
				function hoverData(){
					// $('.todo-main').on('mouseover','li',function(){
					// 	$(this).css('background-color','gray');
					// 	$(this).find('button').css('display','block');
					// })
					// $('.todo-main').on('mouseout','li',function(){
					// 	$(this).css('background-color','white');
					// 	$(this).find('button').css('display','none');
					// })
					
					$('.todo-main').on('mouseover','li',function(){
						$(this).css('background-color','rgb(204,204,204)').find('button').show();
					}).on('mouseout','li',function(){
						$(this).css('background-color','white').find('button').hide();
					})
				}


				// 计算全部数据
				getAllNum();
				function getAllNum(){
					$('#allTodos').text($('.todo-main li').length);
				}

				
				// 单选联动已完成
				singleCheck();
				function singleCheck(){
					$('.todo-main').on('click','label',function(){
						// 使用了表单选择器 来获取选中数据
						var num = $('.todo-main li label input:checked').length;
						$('#allComplateTodos').text(num);
						
						
						if(num === $('.todo-main li').length){
							// 在js中或者jq中 如果标签的属性名字和属性值相等
							// 那么我们需要是boolean类型的来赋值
							// disable = disable
							// var a = document.getElementById('input');
							// a.style.disable = true;
							$('#checkAll').prop('checked',true);
						}else{
							$('#checkAll').prop('checked',false);
						}
						
					})
				}

				// 点击全选
				allCheck();
				
				function allCheck(){
					$('#checkAll').click(function(){
						// 如果点击完成之后 是checked  那么全选
						// 如果点击之后不是checked  那么不选
						if(this.checked){
							$('.todo-main li label input').prop('checked',true);
							$('#allComplateTodos').text($('.todo-main li').length);
						}else{
							$('.todo-main li label input').prop('checked',false);
							$('#allComplateTodos').text(0);
						}
					})
				}
				
				// 发布内容
				publish();
				function publish(){
					$('#newTodo').keydown(function(e){
						if(e.keyCode == 13){
							// 获取文本框中的内容
							var content = $(this).val().trim();
							// 如果什么都没有输入 则不执行后续的代码
							if(!content){
								return;
							}
							var str =
								$('<li class="todo-list">\
											<label>\
												<input type="checkbox">\
												<span>'+content+'</span>\
											</label>\
											<button class="btn btn-danger">删除</button>\
								</li>');
								// jquery可以帮助我们将字符串进行优化
							$('.todo-main').append(str);
							// 当调用动画的时候 必须是一个jq对象
							str.hide().slideDown(1000);
							// 清空文本框数据
							$('#newTodo').val('');
							// 修改全部数据
							getAllNum();
							
						}
					})
				}
				
				// 单击删除
				singleDelete();
				function singleDelete(){
					$('.todo-main').on('click','.btn',function(){
						// 没动画删除
						// $(this).parent().remove();
						// // 计算全部数据
						// getAllNum();
						// // 已完成数据
						// var num = $('.todo-main li label input:checked').length;
						// $('#allComplateTodos').html(num);
						
						// // 全选的勾选
						// if(num === $('.todo-main li').length){
						// 	$('#checkAll').prop('checked',true);
						// }else{
						// 	$('#checkAll').prop('checked',false);
						// }
						
						// 有动画删除
						$(this).parent().slideUp(500,function(){
							$(this).remove();
							// 计算全部数据
							getAllNum();
							// 已完成数据
							var num = $('.todo-main li label input:checked').length;
							$('#allComplateTodos').html(num);
							
							// 全选的勾选
							if(num === $('.todo-main li').length){
								$('#checkAll').prop('checked',true);
							}else{
								$('#checkAll').prop('checked',false);
							}
						})
					})
				}
				
				
				// 删除全部选中
				allDelete();
				
				function allDelete(){
					$('#removeAllComplate').click(function(){
						// 无动画删除
						// $('.todo-main li label input:checked').parent().parent().remove();
						// // 计算全部数据
						// getAllNum();
						// // 已完成数据
						// $('#allComplateTodos').html(0);
						
						// 有动画删除
						$('.todo-main li label input:checked').parent().parent().slideUp(500,function(){
							$(this).remove();
							// 计算全部数据
							getAllNum();
							// 已完成数据
							$('#allComplateTodos').html(0);
						})
						
					})
					
					
					
				}
			})
		</script>

	</body>

</html>
